<template>
	<view class="select-page">
		
		<!-- 搜索功能，后期优化使用 -->
		<view class="search-bar">
			<view class="tui-searchbox">
				<view class="tui-search-input">
					<icon type="search" :size='13' color='#333' @click="iconClick"></icon>
					<input confirm-type="search" style="width: 400rpx;" placeholder="输入名称搜索圈子"  placeholder-class="tui-input-plholder"
					 class="tui-input" @change="change" v-model.trim="searchContent" />
					<!-- <icon type="clear" :size='13' color='#bcbcbc' @tap="cleanKey" v-show="key"></icon> -->
				</view>
			</view>
			<!-- 创建圈子按钮 -->
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="create" v-if="!phone">创建</button>
			<button type="primary" @click="create" hover-class="none" class="create" v-else>创建</button>
		</view>
		
		
		<view class="select">
		  <!-- 左侧一级分类 -->
		  <view class="aside-bar">
		    <scroll-view scroll-y style="height: 100%" :scroll-top="scrollTop" scroll-with-animation>
		      <view class="aside-bar__scroll">
		        <view
		          class="aside-bar__scroll-item ellipsis"
		          :class="{ active: current === index }"
		          v-for="(item, index) in tabs"
		          :key="index"
		          @click="chooseOne(item,index)"
		        >
		          {{ item.category_title }}
		        </view>
		      </view>
		    </scroll-view>
		  </view>
		
		  <!-- 右侧二级分类 -->
		  <view class="cate-content">
		   
		
		    <!-- 列表 -->
		    <view class="cate-content__list" v-if="childCategories">
					<!-- @scrolltolower="scrollReachBottom" 后期需优化加载功能-->
		      <scroll-view scroll-y scroll-with-animation style="height: 100%" >
		        <block v-if="childCategories.length > 0">
		          <view
		            class="cate-content__list-item"
		            v-for="(item, index) in childCategories"
		            :key="index"
		            @click="godetail(item.id)"
		          >
		            <view class="cate-content__thumbnail">
		              <image  :src="item.logo" mode="aspectFill" />
		            </view>
		
		            <view class="cate-content__list-item-info">
		              <view class="cate-content__title">{{ item.name }}</view>
		              <view class="cate-content__desc">{{ item.intro }}</view>
		            </view>
		          </view>
		
		          <u-loadmore :status="loadmore" bg-color="transparent" />
		        </block>
		        <view v-else>
							<view class="none">
								该类别暂无圈子喔~_~
							</view>
		        </view>
		      </scroll-view>
		    </view>
		  </view>
			
		</view>
	</view>
	
	
</template>

<script>
import api from '../../common/api.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
			searchContent:'',			//搜索文本
      current: 0, 				  // 当前选中的一级分类
      scrollTop: 0, 			  // 距离顶部的距离
			cateList:[], 				  // 获取到的分类数据(未处理)
			uid:null, 					  // 当前用户id
      tab: [], 						  // 部分一级分类
			tabs:[], 							// 完整一级分类
      childCategories: [],  // 二级分类
      page: 1, 						  // 分页
			limit:15,							//单页条数限制
      loadmore: 'loadmore',
			firstclick:true
    }
  },
	
	computed:mapState(['phone']), 
	
  methods: {
		
		async getPhoneNumber (e) {//手机号授权
		　　if(e.detail.errMsg=="getPhoneNumber:ok"){
		      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
					let sres = await api.SetUserPhone(res.purePhoneNumber)
					if(sres.err == 0) {
						this.$store.commit('setPhone',res.purePhoneNumber)
						this.create()
						uni.showToast({
							title:sres.msg,
							duration:800
						})
					}
			}else{
		        console.log('用户拒绝了手机号授权') ;   
		    }
		},
		
    
		create() {//跳转到创建圈子页面
			uni.navigateTo({
				url:'/pages/circle/comps/createCircle?activeTab=' + this.activeTab
			})
		},
		
    chooseOne(item,index) {// 选择一级栏目
      this.current = index
      this.page = 1
      this.loadmore = 'loadmore'
      this.getChildCategoryData(this.page,this.limit,this.tabs[this.current])
      this.setScrollPos()
    },
		
    setScrollPos() {
      let query = uni.createSelectorQuery().in(this)
      let containerHeight = 0
      query
        .select('.aside-bar')
        .boundingClientRect((data) => {
          // 容器的高度
          containerHeight = data.height
        })
        .exec()

      // 循环一级分类的数量
      query
        .selectAll('.aside-bar__scroll-item')
        .boundingClientRect((data) => {
          // 总的数量
          let itemCount = data.length
          // 单个的高度
          let itemHeight = data[0].height
          // 计算距离上侧的距离
          let currentHeight = (this.current + 1) * itemHeight
          if (containerHeight) {
            this.scrollTop = currentHeight - containerHeight / 2
          }
        })
        .exec()
    },
		
    // goSearch() {
    //   uni.navigateTo({
    //     url: '../product/product?type=search'
    //   })
    // },
		
    godetail() {//跳转到圈子页面
    	uni.navigateTo({
    		url:'/pages/circle/comps/Detail?id='+arguments[0]
    	})
    	console.log(arguments[0]);
    },
		
		
		async joinCir(cid) {//加入圈子
			let jres = await api.JoinCir(cid)
			console.log(jres);
			if(jres.err == 0) {
				uni.showToast({
					title:jres.msg,
					duration:700
				})
				this.flag = !this.flag
			}
		},
		
    async getCategoryData() {//获取圈子分类
			this.cateList = await api.GetCategories()
			this.tabs.push({"category_id":0,"category_title": "最火"},{"category_id":0,"category_title": "热门"},{"category_id":0,"category_title": "最新"})
			this.tab = this.cateList.map(item => {return {category_id: item.id, category_title: item.name}})
			this.tabs.push(...this.tab)
			this.getChildCategoryData(this.page,this.limit,this.tabs[this.current])  //需要确保得到上个请求数据id，再去发送该请求
    },
		 
		async getChildCategoryData(page,limit,cate) {// 获取二级栏目数据
			if(cate.category_title == '最火') {
				this.childCategories = await api.GetHotCircles(page,limit)
			}else if(cate.category_title == '热门') {
				this.childCategories = await api.GetRankCircles(page,limit)
			}else if(cate.category_title == '最新') {
				this.childCategories = await api.GetNewCircles(page,limit)
			}else {
					this.childCategories = await api.GetCateCirList(page,limit,cate.category_id)
				}
			
		},
		
		async getMe() {	
			let res = await api.GetMe()
			console.log(res);
			this.uid = res[0].id
			console.log(this.uid);
		},
		
    // 上拉加载更多
    scrollReachBottom() {
      if (this.loadmore !== 'nomore') {
        this.page += 1
        this.getChildCategoryData(this.page)
      }
    }
	},
	async created() {
		await this.getMe()
		await this.getCategoryData()
	}
	/*  computed: {
			...mapState(['cartNum'])
		},
		onShow() {
			this.cartNum > 0 &&
				uni.setTabBarBadge({
					index: 2,
					text: this.cartNum.toString()
				})
		} */
}
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.search-bar {
	display: flex;
	align-items: center;
	width: 750rpx;
	height: 100rpx;
	// box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
	overflow: hidden;
	margin: 30rpx;
}
.create {
	width: 135rpx;
	height: 65rpx;
	z-index: 1;
	background-color: #0068ff;
	color: #fff;
	font-size: 28rpx; 
	align-items: center;
	display: flex;
	justify-content: center;

}
.none {
	height: 100vh;
	padding: 0 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.tui-searchbox {
	// padding-top: 30rpx ;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.tui-search-input {
	width: 100%;
	height: 80rpx;
	border-radius: 10rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.tui-input {
	flex: 1;
	color: #333;
	padding: 0 16rpx;
	font-size: 28rpx;
}

.tui-input-plholder {
	font-size: 28rpx;
	color: #b2b2b2;
}
.none {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.select {
  display: flex;
  justify-content: space-between;

  .aside-bar {
    width: 210rpx;
    /* #ifdef H5 */
    height: calc(100vh - 44px - 50px);
    /* #endif */
    /* #ifndef H5 */
    height: 100vh;
    /* #endif */
    background-color: #f3f3f3;

    &__scroll {
      &-item {
        position: relative;
        width: 100%;
        height: 116rpx;
        line-height: 116rpx;
				text-align: center;
        box-sizing: border-box;
        transition: all 0.3s;
				font-size: 32rpx;
				font-weight: bold;
				color: #b4b8b9;
        /* &::before {
          background-color: #c7b099;
          width: 4rpx;
          height: 0;
          position: absolute;
          content: '';
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          transition: all 0.3s;
        } */

        &.active {
          background-color: #fff;
          color: #0068FF;

          &::before {
            height: 32rpx;
          }
        }
      }
    }
  }

  .cate-content {
    flex: 1;
    padding: 0 20rpx;
    box-sizing: border-box;

    &__list {
      /* #ifdef H5 */
      height: calc(100vh - 44px - 50px - 160rpx);
      /* #endif */
      /* #ifndef H5 */
      height: calc(100vh - 160rpx);
      /* #endif */

      &-item {
        display: flex;
        // margin-bottom: 26rpx;
				padding: 10rpx 8rpx;
				border-bottom: 2rpx solid #eeeeee;
				
        &-info {
					display: flex;
					flex-direction: column;
					
          flex: 1;
					justify-content: center;
          overflow: hidden;
					
        }
      }
    }

    &__thumbnail {
			width: 140rpx;
			height: 110rpx;
      border-radius: 10rpx;
      overflow: hidden;
      margin-right: 24rpx;
			image {
				width: 100%;
				height: 100%;
				border: 8rpx;
			}
    }

    &__title {
      // font-weight: bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    &__desc {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 26rpx;
      color: #999;
    }

    
  }
}
</style>

